<template>
    <div class="vue-toast">
        <div :class="`vue-tip tip-${chooseType} fadeIn`">{{message}}</div><!---->
    </div>
</template>

<script>
export default {
    name: 'toast',
    data () {
        return {
            message:'',
            chooseType:''
        }
    },

    methods: {},

    created (){}
}
</script>

<style scoped>
    .vue-toast {
        width: 100%;
        height: 100%;
        z-index: 100;
        position: fixed;
        top: 0px;
        left: 0px;
        user-select: none;
        background: rgba(0, 0, 0, 0.3);/**/
    }

    .vue-tip {
        position: fixed;
        left: 50%;
        width: 100px;
        line-height: 40px;
        padding: 0 10px;
        margin-left: -60px;
        text-align: center;
        z-index: 9999;
        font-size: 14px;
        color: #fff;
        border-radius: 5px;
        background-color: rgba(0, 0, 0, .7);
    
    }

    .vue-tip.tip-center {
        top: 50%;
    }

    .vue-tip.tip-bottom {
        bottom: 50px;
    }

    .vue-tip.tip-top {
        top: 50px;
    }

    .fadeIn {
        animation: fadeIn .3s ease-in-out;
        visibility: visible !important;
    }

    @keyframes fadeIn {
        0% {
            transform: scale(0);
            opacity: 0.0;
        }
        60% {
            transform: scale(1.1);
        }
        80% {
            transform: scale(0.9);
            opacity: 1;
        }
        100% {
            transform: scale(1);
            opacity: 1;
        }
    }
</style>
